<div class="progress-container progress-container--{{ lxProgress.lxType }} progress-container--{{ lxProgress.lxColor }}"
     ng-class="{ 'progress-container--determinate': lxProgress.lxValue,
                 'progress-container--indeterminate': !lxProgress.lxValue }">
    <div class="progress-circular"
         ng-if="lxProgress.lxType === 'circular'"
         ng-style="lxProgress.getProgressDiameter()">
        <svg class="progress-circular__svg">
            <circle class="progress-circular__path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10" ng-style="lxProgress.getCircularProgressValue()">
        </svg>
    </div>

    <div class="progress-linear" ng-if="lxProgress.lxType === 'linear'">
        <div class="progress-linear__background"></div>
        <div class="progress-linear__bar progress-linear__bar--first" ng-style="lxProgress.getLinearProgressValue()"></div>
        <div class="progress-linear__bar progress-linear__bar--second"></div>
    </div>
</div>
